<script setup lang="ts">
import { verificationFn } from '@/api/register';
import { userrequsertFn } from '@/api/UserApi';
import { useStore } from '@/stores/user';
import type { AxiosResponse } from 'axios';
import { showNotify, showToast } from 'vant';
import { ref, watch } from 'vue';
import type { Ref } from 'vue';
import { useRouter } from 'vue-router';



const router = useRouter()
const store = useStore()
const count: Ref<boolean> = ref(false) //短信验证
const time: Ref<number> = ref(30000) //短信验证时间
const pwdvalue: Ref<string | undefined> = ref('')

const phone: Ref<string> = ref(store.phone)

const showKeyboard: Ref<boolean> = ref(false);


setTimeout(() => {
    count.value = false
}, 30000)

watch(pwdvalue, () => {
    if (String(pwdvalue.value).length == 6) {
        disabled.value = false
    }
})


const disabled: Ref<boolean> = ref(true)

function pwdfocus() {
    showKeyboard.value = true
}



interface ResponseData {
    code: number;
    num: string;
}

// 记录验证码
const num: Ref<string> = ref('')

verificationFn().then((res: AxiosResponse<ResponseData>) => {


    if (res.data.code == 200) {
        console.log(res.data);
        num.value = res.data.num
        showNotify({ type: 'primary', message: res.data.num })
    }
})

// 注册

function registerClick() {

    if (!store.token) {

        if (pwdvalue.value == num.value) {
            // const date = new Date()
            // console.log(date);

            userrequsertFn({
                action: "register",
                username: store.username,
                password: store.password,
                email: store.useremail,
                phone: store.username,
                full_name:store.username,
                birth_date: new Date().toISOString().split('T')[0]
            }).then(res => {

                // console.log(res);
                showToast(res.data.message)
                if (res.data.code == 200) {
                    router.push('/login')
                }

            }).catch(err => {
                // console.log(err);
                showToast(err.data.message)
            })



        } else {
            showToast('验证码错误')
        }
    } else {
        if (pwdvalue.value == num.value) {
            router.push('/pwd/Pwdpath2')
        } else {
            showToast('验证码错误')
        }
    }

}
</script>


<template>
    <div class="navtop">
        <van-nav-bar left-arrow @click-left="$router.back()" z-index="99" fixed :border="false" placeholder
            safe-area-inset-top />
        <div class="registerBox">

            <div class="titlebox">
                <h1>短信验证</h1>
                <p>验证码已通过短信发送至</p>
                <p class="teltext">+86 {{ phone }}</p>
            </div>
            <main class="container">
                <!-- 密码输入框 -->
                <van-password-input :value="pwdvalue" :length="6" :gutter="5" :focused="showKeyboard"
                    @focus="pwdfocus()" />
                <!-- 数字键盘 -->
                <van-number-keyboard v-model="pwdvalue" :show="showKeyboard" :maxlength="6"
                    @blur="showKeyboard = false" />
            </main>


            <footer>
                <van-button :disabled="disabled" @click="registerClick" block type="primary" native-type="submit">
                    注册
                </van-button>
                <van-count-down v-if="count" :time="time" format="sss后重新发送"></van-count-down>
            </footer>

        </div>
    </div>
</template>


<style lang="scss" scoped>
.navtop {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    --van-nav-bar-background: rgbr(0, 0, 0, 0);
}

.registerBox {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .titlebox {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: left;
        margin-top: 20%;

        h1 {
            // font-size: 40px;
            font-weight: 400;
            margin: 0;
        }

        p {
            color: #616161;
        }

        .teltext {
            font-size: 0.2rem;
            color: #0b0b0b;
        }

    }

    .container {
        width: 80%;

        .van-password-input {
            margin: 0;
            --van-password-input-height: 50px;

            :deep(.van-password-input__item) {
                border: 0.25px solid #d7d7d7;
                height: 50px;
                width: 50px;
            }
        }
    }

    .van-cell-group {
        margin: 0;
        margin-bottom: 20px;
        // height: 50px;
    }

    .wpsd {
        position: relative;
        left: 240px;
    }

    footer {
        width: 80%;
        height: 50%;
        margin: 30px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .van-count-down {
            font-size: 0.15rem;
            color: #a2a2a2;
            font-weight: 700;
            word-spacing: 10px;
            margin-top: 20px;
        }

    }

}
</style>